{extend name="Public/base" /}
{block name="main"}
    <style type="text/css">
        .pagination{text-align:center;margin-top:20px;margin-bottom: 20px;}  
        .pagination li{margin:0px 10px; border:1px solid #e6e6e6;padding: 3px 8px;display: inline-block;}  
        .pagination .active{background-color: #dd1a20;color: #fff;}  
        .pagination .disabled{color:#aaa;} 
    </style>
    <fieldset class="layui-elem-field">
        <legend>用户管理 - 用户列表</legend>
        <div class="layui-field-box">
            <span class="layui-btn layui-btn-normal api-add"><i class="layui-icon">&#xe608;</i> 新增</span>
            <form class="layui-form" method='post' action="{:U('search')}">
                <div class="layui-form-item" style="margin-top: -37px;">
                    <div class="layui-input-block">
                        <input style="width:20%;float: left;" type="text" name="keyword" placeholder="按用户名搜索" class="layui-input" />
                        <input type="submit" class="layui-btn" value="搜索" />
                    </div>
                </div>
            </form>
            <table class="layui-table" lay-even>
                <thead>
                <tr>
                    <th>#</th>
                    <th>用户姓名</th>
                    <th>登录用户名</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="list" id="vo"}
                    <tr>
                        <td>{$vo['id']}</td>
                        <td>{$vo['nickname']}</td>
                        <td>{$vo['user_name']}</td>
                        <td>
                            {if condition="$vo['status']"}
                                <span style="border-radius: 2px;background-color: #5FB878;padding:5px 10px;color: #ffffff">启用</span>
                                {else /}
                                <span style="border-radius: 2px;background-color: #FF5722;padding:5px 10px;color: #ffffff">禁用</span>
                            {/if}
                        </td>
                        <td>
                            {if condition="$vo['status']"}
                                <span class="layui-btn layui-btn-danger confirm" data-info="你确定禁用当前用户么？" data-id="{$vo['id']}" data-url="{:U('close')}">禁用</span>
                                {else /}
                                <span class="layui-btn confirm" data-info="你确定启用当前用户么？" data-id="{$vo['id']}" data-url="{:U('open')}">启用</span>
                            {/if}
                            <span data-url="folderlist.html?uid={$vo['id']}&path={:DS}" class="layui-btn edit layui-btn-normal">目录管理</span>
                            <span data-url="shareList.html?uid={$vo['id']}" class="layui-btn edit layui-btn-normal">分享管理</span>
                            <span data-url="{:url('add',['uid'=>$vo[id]])}" class="layui-btn customer-edit layui-btn-normal">编辑</span>
                            <span class="layui-btn layui-btn-danger confirm" data-id="{$vo['id']}" data-info="你确定删除当前菜单么？" data-url="{:U('del')}">删除</span>
                        </td>
                    </tr>
                {/volist}
                </tbody>
            </table>
            {$list->render()}
        </div>
    </fieldset>
{/block}
{block name="myScript"}
    <script>
        layui.use(['layer'], function() {
            $('.api-add').on('click', function () {
                layer.open({
                    type: 2,
                    area: ['60%', '60%'],
                    maxmin: true,
                    content: '{:U("add")}'
                });
            });
            $('.customer-edit').on('click', function () {
                layer.open({
                    type: 2,
                    area: ['60%', '60%'],
                    maxmin: true,
                    content: $(this).attr('data-url')
                });
            });
            $('.edit').on('click', function () {
                var ownObj = $(this);
                //location.href = 'ownObj.attr('data-url')';
                
                location.href=ownObj.attr('data-url');
            });
            $('.confirm').on('click', function () {
                var ownObj = $(this);
                layer.confirm(ownObj.attr('data-info'), {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.ajax({
                        type: "POST",
                        url: ownObj.attr('data-url'),
                        data: {id:ownObj.attr('data-id')},
                        success: function(msg){
                            if( msg.code == 1 ){
                                location.reload();
                            }else{
                                layer.msg(msg.msg, {
                                    icon: 5,
                                    shade: [0.6, '#393D49'],
                                    time:1500
                                });
                            }
                        }
                    });
                });
            });
        });
    </script>
{/block}